<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
	xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">

	<div class="container-div ui-layout-center">
		<div class="row" style="height:400px;">
			<div class="col-sm-6"  style="height:400px;padding:0 7px;">
				<div id="chartPlan" style="width:100%;height:100%;background: #fff;padding: 15px 5px;border-radius: 10px;box-shadow: 1px 1px 3px rgba(0,0,0,.4);"></div>
			</div>
			<div class="col-sm-6"  style="height:400px;padding:0 7px;">
				<div id="chartDept" style="width:100%;height:100%;background: #fff;padding: 15px 5px;border-radius: 10px;box-shadow: 1px 1px 3px rgba(0,0,0,.4);"></div>
			</div>
		</div>
		<div class="row" style="height:470px;margin:7px -15px 15px -15px;">
			<div class="col-sm-12"    style="height:470px;padding:10px 7px 0 7px;">
				<div id="chartTime" style="width:100%;height:100%;background: #fff;padding: 30px 0 0 0;border-radius: 10px;box-shadow: 1px 1px 3px rgba(0,0,0,.4);"></div>
			</div>
		</div>
	</div>
	<div th:include="include :: footer"></div>
	<script th:src="@{/js/echarts.common.min.js}"></script>
	<script th:inline="javascript">
	bgPie();
	bgBar();
	bgLine();
	//bg骨干饼图统计
	function bgPie(){
		var chartPlan = echarts.init(document.getElementById('chartPlan'));
		$.ajax({
			cache : true,
			type : "POST",
			url : ctx + "statistic/overview/list/listByBgPie",
			async : false,
			error : function(request) {
				$.modal.alertError("系统错误");
			},
			success : function(recvData) {
				var BGdata={
						text:"BG骨干占比统计",
						legnedData:recvData.data,
						seriesData:recvData.serizeData
				}
				var option = {
					    title : {
					        text: BGdata.text,
					        x:'center'
					    },
					    tooltip : {
					        trigger: 'item',
					        formatter: "{a} <br/>{b} : {c} ({d}%)"
					    },
					    legend: {
					        orient: 'vertical',
					        left: 'left',
					        data: BGdata.legnedData
					    },
					    series : [
					        {
					            name: '骨干数量',
					            type: 'pie',
					            radius : '55%',
					            center: ['50%', '60%'],
					            data:BGdata.seriesData,
					            itemStyle: {
					                emphasis: {
					                    shadowBlur: 10,
					                    shadowOffsetX: 0,
					                    shadowColor: 'rgba(0, 0, 0, 0.5)'
					                }
					            }
					        }
					    ]
				};
				chartPlan.setOption(option);
				$(window).resize(function(){
					chartPlan.resize();
				})
			}
		});
	}
	//BG骨干数量柱状图
	function bgBar(){
		var chartPlan = echarts.init(document.getElementById('chartDept'));
		$.ajax({
			cache : true,
			type : "POST",
			url : ctx + "statistic/overview/list/listByBgBar",
			async : false,
			error : function(request) {
				$.modal.alertError("系统错误");
			},
			success : function(recvData) {
				var data={
						text:"BG骨干数量统计"	,
						legnedData:recvData.legnedData,
						seriesName:"骨干数量",
						seriesData:recvData.seriesData
				};
				var option = {
						 title : {
						       text:data.text,
						       x:'center'
						 },
						 tooltip : {
						       trigger: 'axis',
						       formatter: "{a} <br/>{b} : {c} ({d}%)",
						       axisPointer: {
						           type: 'shadow',
						           label: {
						               backgroundColor: '#6a7985'
						           }
						       }
						 },
						 xAxis: {
						      type: 'category',
						      axisLabel:{
						    	  interval:0
						      },
						      data: data.legnedData
						 },
						 yAxis: {
						      type: 'value',
						      splitLine:{show: false}
						 },
						 series: [{
						      label: {
						           normal: {
						               show: true,
						               position: 'top'
						           }
						      },
						      name:data.seriesName,
						      barWidth :20,
						      data: data.seriesData,
						      type: 'bar',
						      color:['#1c84c6']
						 }]
				 };
				 chartPlan.setOption(option);
				 $(window).resize(function(){
					 chartPlan.resize();
				 }) 
			}
		});
	}
	//按时间查看骨干数量
	function bgLine(){
		var chartPlan = echarts.init(document.getElementById('chartTime'));
		$.ajax({
			cache : true,
			type : "POST",
			url : ctx + "statistic/overview/list/date",
			async : false,
			error : function(request) {
				$.modal.alertError("系统错误");
			},
			success : function(recvData) {
					var timeData={
						text:"骨干时间分布",
						data:['骨干数量'],
						xAxisData:recvData.xAxisData,
						seriseData: recvData.seriseData
					}
					var option1 = {
						title: {
							text:timeData.text ,
							left:"center"
						},
						tooltip: {
							trigger: 'axis'
						},
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						xAxis: {
							type: 'category',
							boundaryGap: false,
							data:timeData.xAxisData
						},
						yAxis: {
							 splitLine:{show: false},
							type: 'value'
						},
						series:timeData.seriseData
					};
					chartPlan.setOption(option1);
					$(window).resize(function(){
						chartPlan.resize();
					})
			}
		});
	}
	</script>
</body>
</html>